<template>
    <view class="commodityManagement">
        <view class="inputValueBox">
            <u--input focus v-model="valueData" customStyle="background: #fff;" @confirm="on_confirm" shape="circle"
                :adjustPosition="false" border="true" fontSize="14px" placeholder="搜索商品名称" prefixIcon="search"
                prefixIconStyle="font-size: 22px;color: #0000000;font-weight: 700;" />
        </view>

        <view class="table">
            <t-table @change="change">
                <t-tr>
                    <t-th>ID</t-th>
                    <t-th>商品名称</t-th>
                    <t-th>库存</t-th>
                    <t-th>状态</t-th>
                </t-tr>
                <t-tr v-for="item in tableList" :key="item.id">
                    <t-td>{{ item.id }}</t-td>
                    <t-td>{{ item.name }}</t-td>
                    <t-td>
                        <view @click="on_edit(item)" style="color:#1890ff">{{ item.stock }}</view>
                    </t-td>
                    <t-td>
                        <u-tag @click="on_type(item)" size="mini" :type="item.status == 0 ? 'error' : 'success'"
                            :text="item.status == 0 ? '下架' : '上架'"></u-tag>
                    </t-td>
                </t-tr>
            </t-table>
        </view>
        <view class="pagination">
            <uni-pagination @change="on_change" :total="total"></uni-pagination>
            <view class="example">
                <text class="example-info">当前页：{{ page }}，数据总量：{{ total }}条，每页数据：{{ 10 }}</text>
            </view>
        </view>

        <u-modal @confirm="on_operation(1)" @cancel="on_operation(2)" :showCancelButton="true" :show="showType"
            title="修改库存">
            <view class="slot-content">
                <view class="input" v-for="item in specificationsList" :key="item.id">
                    <view>{{ item.good_style }}：</view>
                    <view class="valueName">
                        <u--input type="number" placeholder="请输入库存" border="surround" v-model="item.stock"></u--input>
                    </view>
                </view>
            </view>
        </u-modal>
        <u-loading-page loading-color="#1890ff" color="#fff" bg-color="rgba(0, 0, 0, 0.5)"
            :loading="loadingType"></u-loading-page>
    </view>
</template>

<script>
import tTable from '@/components/t-table/t-table.vue';
import tTh from '@/components/t-table/t-th.vue';
import tTr from '@/components/t-table/t-tr.vue';
import tTd from '@/components/t-table/t-td.vue';
export default {
    components: {
        tTable,
        tTh,
        tTr,
        tTd
    },
    data() {
        return {
            loadingType: false,
            specificationsList: [],
            page: 1,
            total: 0,
            value: '',
            showType: false,
            valueData: '',
            tableList: [
            ],
            name: ''
        };
    },
    onShow() {
        this.ajax_goodsList()
    },
    methods: {
        ajax_goodsList() {
            this.loadingType = true
            this.$request.request({
                url: 'goods/list',
                method: 'get',
                data: {
                    name: this.name,
                    page: this.page,
                    listType: 'all'
                }
            }).then(res => {
                this.tableList = res.data.list.data
                this.total = res.data.list.total
                this.loadingType = false
            }).finally(() => {
                this.loadingType = false
            })
        },
        on_change(page) {
            this.page = page.current
            this.ajax_goodsList()
        },
        on_operation(index) {
            if (index == 1) {
                this.$request.request({
                    url: 'mobile/updateInventory',
                    method: 'post',
                    data: {
                        data: this.specificationsList
                    }
                }).then(res => {
                    uni.showToast({ title: '修改成功', icon: 'none' })
                    this.showType = false
                    this.ajax_goodsList()
                }).finally(() => {
                })
            }
            if (index == 2) {
                this.showType = false
            }
        },
        on_confirm(e) {
            console.log(e)
            this.page = 1
            this.name = e;
            this.ajax_goodsList()
        },
        on_edit(item) {
            console.log(item)
            this.specificationsList = item.skuList
            this.showType = true
        },
        on_type(item) {
            console.log(item)
            uni.showModal({
                title: '确认提示',
                content: item.status == 0 ? "确认要下架该商品吗?" : '确认要上架该商品吗?',
                confirmText: '确定',
                cancelText: '取消',
                success: (res) => {
                    if (res.confirm) {
                        // 用户点击确定
                        this.$request.request({
                            url: 'goods/setKey',
                            method: 'post',
                            data: {
                                goodsIds: [item.id],
                                key: 'status',
                                state: item.status == 0 ? true : false
                            }
                        }).then(res => {
                            uni.showToast({ title: '操作成功', icon: 'none' })
                            this.ajax_goodsList()
                        }).finally(() => {
                        })

                    } else if (res.cancel) {
                        // 用户点击取消
                    }
                }
            })
        }
    },
};
</script>
<style lang="scss" scoped>
.commodityManagement {
    padding: 20rpx;

    .slot-content {
        width: 100%;
    }

    .input {
        width: 100%;
        margin-top: 20rpx;
        .valueName {
            margin-top: 10rpx;
        }
    }

    .input:nth-child(1) {
        margin-top: 0;
    }


}
</style>